<!-- 订单明细  pms:order:detailed -->
<template>
  <div class="content">
    <el-form :model="query" ref="form" label-width="100px" size="medium" class="search-form">
      <el-form-item label="创建时间：" prop="timeRange">
        <TimeRangePicker v-model="query.timeRange" type="datetimerange" :defaultTime="['00:00:00', nowHMS]"
                         startPlaceholder="开始时间" endPlaceholder="结束时间"></TimeRangePicker>
      </el-form-item>
      <el-form-item label="关键字：">
        <el-input style="width:300px;" v-model="query.keyword" placeholder="请输入商品名称/商品编码/手机号/昵称" @keyup.enter.native="handleSearch">
        </el-input>
      </el-form-item>

      <el-form-item label="金额：" prop="payAmountRange">
        <InputNumber v-model="query.payAmountRange"></InputNumber>
      </el-form-item>

      <el-form-item label="积分：" prop="payIntegrationRange">
        <InputNumber v-model="query.payIntegrationRange"></InputNumber>
      </el-form-item>
      <el-form-item label="订单状态：" prop="status">
        <el-select v-model="query.status" placeholder="请选择状态">
          <el-option label="全部" :value="9"></el-option>
          <!-- 1->待发货；2->已发货；3->已完成； -->
          <el-option label="待发货" :value="1"></el-option>
          <el-option label="待收货" :value="2"></el-option>
          <el-option label="已完成" :value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label-width="25px" class="form-item-all">
        <Cbutton @click="handleSearch" :btnloading="tableLoading">查询</Cbutton>
        <Cbutton @click="handleExport" :btnloading="exportLoading">订单明细导出</Cbutton>
      </el-form-item>
    </el-form>

    <div class="content-container">
      <el-table :data="tableList" v-loading="tableLoading" ref="tableData" border fit stripe highlight-current-row
                empty-text="没有符合条件的订单" @sort-change="sortTableData">
        <el-table-column label="序号" type="index" align="center" width="70"></el-table-column>
        <!-- <el-table-column prop="orderSn" label="订单编号" align="center" min-width="140"></el-table-column> -->
        <el-table-column prop="productSn" label="商品编码" align="center" min-width="130"></el-table-column>
        <el-table-column prop="shopName" label="商铺" align="center" min-width="110"></el-table-column>
        <el-table-column prop="productName" label="商品名称" align="center" min-width="110"></el-table-column>
        <el-table-column prop="" label="规格" align="center" min-width="110">
          <template slot-scope="scope">
            <span>{{scope.row.sp1 ? scope.row.sp1:''}}{{scope.row.sp2 ? ',' + scope.row.sp2 : ''}}{{scope.row.sp3 ?
              ',' + scope.row.sp3: ''}}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品图片" align="center" width="120">
          <template slot-scope="scope">
            <el-image style="height: 80px; width: 80px;" class="product-img-small" :src="scope.row.productPic"
                      :preview-src-list="[scope.row.productPic]"></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" sortable align="center" min-width="160">
          <template slot-scope="scope">
            <span>{{scope.row.createTime | glbTimeFormat}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="realAmount" label="金额" sortable align="center" min-width="110"></el-table-column>
        <el-table-column prop="productIntegration" label="积分" sortable align="center" min-width="110"></el-table-column>
        <el-table-column prop="status" label="状态" align="center" min-width="160">
          <template slot-scope="scope">
            {{ dealListStr(scope.row.status, 'orderStatusList') + retundStatusStr(scope.row)}}
          </template>
        </el-table-column>
        <el-table-column prop="productQuantity" label="购买数量" align="center" min-width="110"></el-table-column>
        <el-table-column prop="nickname" label="购买用户" align="center" min-width="110"></el-table-column>
        <el-table-column prop="phone" label="购买用户电话" align="center" min-width="110"></el-table-column>
      </el-table>

      <Pagination @pageChange="getPage" :pageDefultData="{
        pageNum: query.pageNum,
        pageRow: query.pageSize,
        totalCount: totalCount }">
      </Pagination>
    </div>
  </div>
</template>

<script>
import { ExportList, ExportStr, NowDateTime } from '@/utils'
import ExcelPort from '@/utils/excelPort'
import { GetOrderDetailList, OrderDetailExportExcel } from '@/api/order'
import InputNumber from '@/components/InputNumber'
import TimeRangePicker from '@/components/DatePicker/TimeRangePicker'
import { mapGetters } from 'vuex'
export default {
  name: 'pmsOrderDetailed',
  components: { InputNumber, TimeRangePicker },
  data () {
    return {
      nowHMS: NowDateTime(),
      query: {
        timeRange: [],
        payAmountRange: [],
        payIntegrationRange: [],
        status: 9,
        keyword: '',
        receiverNamePhone: '',
        brandName: '',
        pageNum: 1,
        pageSize: 10
      },
      totalCount: 0,
      tableList: [],
      tableSelectList: [],
      tableLoading: false,
      exportLoading: false,
      orderStatusList: ExportList('orderStatusList')
    }
  },
  props: {},
  watch: {},
  computed: {
    ...mapGetters([
      'routerParams'
    ])
  },
  created () {
    if (this.routerParams['$pageName'] === this.$route.name) {
      this.activeName = this.routerParams.activeName
      this.query.status = this.activeName
      this.query.pageNum = this.routerParams.pageNum
      this.query.pageSize = this.routerParams.pageRow
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    getList () {
      this.tableLoading = true
      let params = this.getFiltersParams()
      GetOrderDetailList(params).then(res => {
        this.tableLoading = false
        const data = res.data
        this.tableList = data.list
        this.totalCount = data.total
      }).catch(() => {
        this.tableLoading = false
      })
    },
    handleSearch () {
      this.handleClearSort()
      this.query.pageNum = 1
      this.getList()
    },
    handleExport () {
      let params = this.getFiltersParams()
      params.download = 1 // 下载：0不下载/1下载
      this.exportLoading = true
      OrderDetailExportExcel(params).then(res => {
        this.exportLoading = false
        const data = res.data
        ExcelPort(data.vistUrl)
      }).catch(e => {
        this.exportLoading = false
        this.$message.error(e.message || '订单导出失败！')
      })
    },
    getFiltersParams () {
      let params = {}
      if (this.query.timeRange && this.query.timeRange.length > 1) {
        params.createTimeSt = this.query.timeRange[0]
        params.createTimeEn = this.query.timeRange[1]
      }
      if (this.query.payAmountRange && this.query.payAmountRange.length > 1) {
        params.payAmountSt = this.query.payAmountRange[0]
        params.payAmountEn = this.query.payAmountRange[1]
      }
      if (this.query.payIntegrationRange && this.query.payIntegrationRange.length > 1) {
        params.payIntegrationSt = this.query.payIntegrationRange[0]
        params.payIntegrationEn = this.query.payIntegrationRange[1]
      }
      params.pageNum = this.query.pageNum
      params.pageSize = this.query.pageSize
      params.status = this.query.status || '0'
      params.keyword = this.query.keyword
      params.orderBy = this.query.orderBy
      params.sort = this.query.sort
      return params
    },
    sortTableData ({ column, prop, order }) {
      // column 列属性 prop 排序字段 order[descending, ascending] 升降序
      //  payAmount,payIntegration,createTime
      this.query.orderBy = prop
      if (order) {
        this.query.sort = order.indexOf('asc') > -1 ? 'asc' : 'desc'
      } else {
        this.query.sort = ''
      }
      this.query.page = 1
      this.getList()
    },
    // 清除排序
    handleClearSort () {
      this.$refs.tableData.clearSort()
      this.query.orderBy = ''
      this.query.sort = ''
    },
    getPage (val) {
      this.query.pageNum = val.pageNum
      this.query.pageSize = val.pageRow
      this.getList()
    },
    dealListStr (key, type) {
      return ExportStr(key, type)
    },
    retundStatusStr (val) {
      const confirmStatus = {
        0: '未确认',
        1: '客户签收', // 已确认
        2: '自动签收' // 已确认自动签收
      }
      const closedStatus = {
        1: '手动取消订单',
        2: '超时自动取消',
        3: '退款关闭',
        4: '退货退款关闭'
      }
      const retundStatusStatus = {
        1: '正常',
        2: '申请退款',
        4: '申请退货退款',
        5: '退款完成',
        6: '退货中',
        7: '退货退款完成',
        8: '退货待填物流',
        9: '退货退款失败）'
      }
      if (val.status === 4) {
        return `(${closedStatus[val.closedStatus]})`
      } else if (val.status === 1 && val.refundStatus && val.refundStatus !== 1) {
        return `(${retundStatusStatus[val.refundStatus]})`
      } else if (val.status === 3 && val.confirmStatus) {
        return `(${confirmStatus[val.confirmStatus]})`
      } else {
        return ''
      }
    }
  }
}

</script>
<style lang='scss' scoped>
</style>
